<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
		
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
		<title>支付订单</title>
		<style type="text/css">
			.mui-bar {background: rgb(255,209,0); color: black;}
			.logo {width: 100vw; height: 35vh;padding: 10% 5%;}
			.logo > img{margin: 0 auto; display: block;}
			.logo > p{text-align: center;font-size: 16px;color: black;margin: 1% auto 1%;line-height: 22px;}
			.orderDetail{padding: 1vh 1vw;}
			.orderDetail > li > span{font-size: 16px;font-weight: 500;}
			.orderDetail > li > p{width: 70%;text-align: right;}
			.weixinPay{width: 90%;height: 7vh; background: rgb(255,209,0); border-radius:20px;border: 1px solid black;margin:2vh auto 0;line-height: 5vh;display: block;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<span class="mui-pull-left mui-icon mui-icon-back"></span>
			<span class="mui-title">支付订单</span>
		</header>
		<div class="mui-content">
			<div class="logo">
				<img src="../images/logo/logo_02.png"/>
				<p>就想官方商城</p>
			</div>
			<div class="orderDetail mui-table-view" ms-controller="orderPay">
				<li class="mui-table-view-cell">
					<span>订单编号</span>
					<p class="mui-pull-right">{{@orderssn}}</p>
					<input type="hidden" ms-attr="{value:@orderssn}" class="orderssn" />
				</li>
				<li class="mui-table-view-cell">
					<span>支付金额</span>
					<p class="mui-pull-right">¥ {{@orderGold}}</p>
					<input type="hidden" ms-attr="{value:@orderGold}" />
				</li>
			</div>
			<a href="javascript:;" class="mui-btn weixinPay">微信支付</a>
		</div>
	</body>
	<script src="../js/avalon.js"></script>
	<script src="../js/mui.min.js"></script>
	<script src="../js/config.js"></script>
	<script>
		mui.init({
			swipeBack:true	
		});
		
		mui.plusReady(function(){
			ws = plus.webview.currentWebview();
			wo = ws.opener();
			
			ws.show('pop-in');
			plus.nativeUI.closeWaiting();
			
			orderssn = ws.orderssn;
			ordergold = ws.ordergold;
			vm.orderssn = orderssn;
			vm.orderGold = ordergold;
		});
		
		/**
		 * 实例化 avalon VM
		 */
		var vm = avalon.define({
			$id : 'orderPay',
			orderssn : '',
			orderGold : ''
		});
		
		/**
		 * 跳转到微信 支付
		 */
		var wcPay = document.getElementsByClassName('weixinPay')[0];
		wcPay.addEventListener('tap',function(){
			plus.payment.getChannels(function(channels){
				
				plus.payment.request(channels[1],vm.orderssn,function(e){
					console.log(e);
				},function(error){
					console.log(error.message);
				});
			},function(error){
				console.log(error);
			})
		});
		
		
		
	</script>
</html>
